import { createRouter, createWebHashHistory } from 'vue-router'
import { useUserStore } from '@/store/user'
import { getUserDetail } from '@/api/user'
import { addRoutes } from '@/utils/permission'

const router = createRouter({
  history: createWebHashHistory(), // 路由模式
  routes: [
    // 静态路由（写死的）
    {
      path: '/login',
      name: 'myLogin', // 命名路由
      meta: {
        notNeedAuth: true,
        title: '登录'
      },
      component: () => import('@/views/Login/index.vue')
    },
    // 静态路由（写死的）
    {
      path: '/',
      name: 'myLayout',
      component: () => import('@/views/Layout/index.vue'),
      meta: {
        title: 'Layout布局'
      },
      children: [
        // 静态路由（写死的）
        // {
        //   path: 'user/list',
        //   meta: {
        //     title: '用户列表'
        //   },
        //   component: () => import('@/views/User/index.vue')
        // },
        // {
        //   path: 'swiper/list',
        //   meta: {
        //     title: '轮播图列表'
        //   },
        //   component: () => import('@/views/Swiper/index.vue')
        // },
        // {
        //   path: 'goods/list',
        //   meta: {
        //     title: '商品列表'
        //   },
        //   component: () => import('@/views/Goods/index.vue')
        //   // beforeEnter: (to, from) => {
        //   //   return true
        //   // }
        // },
        // {
        //   path: 'visible/echarts',
        //   meta: {
        //     title: 'echarts原生'
        //   },
        //   component: () => import('@/views/Visible/echarts.vue')
        // },
        // {
        //   path: 'visible/echarts-third',
        //   meta: {
        //     title: 'echarts第三方'
        //   },
        //   component: () => import('@/views/Visible/ehcarts-other.vue')
        // },
        // {
        //   path: 'editor/submit',
        //   meta: {
        //     title: '富文本编辑器'
        //   },
        //   component: () => import('@/views/Editor/index.vue')
        // },
        // {
        //   path: 'map/baidu',
        //   meta: {
        //     title: '百度地图原生'
        //   },
        //   component: () => import('@/views/Map/baidu.vue')
        // },
        // {
        //   path: 'map/baidu-third',
        //   meta: {
        //     title: '百度地图第三方'
        //   },
        //   component: () => import('@/views/Map/baidu-third.vue')
        // }
      ]
    },
    // 静态路由（写死的）
    {
      path: '/:pathMatch(.*)*',
      component: () => import('@/views/NotFound/index.vue')
    }
  ]
})

// 路由前置守卫
/**
 * vue3的路由，返回true，代表放行，返回false不放行
 * 如果返回的是某个字符串的路径，比如 return 'myLogin' 直接跳转到登录页面
 */

// 是否第一次加载动态路由
export const operator = {
  isInit: true
}
router.beforeEach(async to => {
  // console.log(router.getRoutes())

  if (to.meta.notNeedAuth) return true

  // 下面是需要先判断是否登录的
  const store = useUserStore()
  if (store.token) {
    if (operator.isInit) {
      console.log('----添加动态路由啦...----')

      // 获取登录人的用户信息（用户信息中有权限信息）
      const res = await getUserDetail()

      // 把信息存储到仓库中（Layout要进行左边菜单的动态渲染）
      store.setUser(res.data.data)

      // 根据获取到的权限数据，生成一个一个的路由规则，然后添加给myLayout【难】
      addRoutes(res.data.data.menus)

      // 第一次进来才添加动态路由
      // 把该用户的动态路由添加好
      /**
       * 参数1：放在谁下面
       * 参数2：它下面的嵌套路由规则
       */

      /** 
      router.addRoute('myLayout', {
        path: 'swiper/list',
        meta: {
          title: '轮播图列表'
        },
        component: () => import('@/views/Swiper/index.vue')
      })
      */

      // 必须调用，否则出现404
      router.replace({ path: to.path })

      operator.isInit = false
    }

    return true
  }

  // 能来到这里，说明没有权限，跳转到登录页面
  return { name: 'myLogin', query: { redirect: to.fullPath } }
  // return `/login?redirect=${to.fullPath}`
})

router.afterEach(to => {
  document.title = (to.meta as any).title
})

export default router
